<!-- eslint-disable -->
<template>
  <div style="display: flex; align-items: center; justify-content: center; width: 80%; height: 100%; margin: 0 auto">
    <main class="module-container" style="display: flex">
      <div class="module-wrapper">
        <div class="module-head">
          <span style="font-size: 16px">组合项目列表</span>
          <span style="font-size: 14px">{{ currentSelectLeft }}</span>
        </div>
        <div class="module-content">
          <el-input
            style="padding: 14px 10px 0"
            clearable
            @input="listLeftInputChange(listLeftInput)"
            v-model="listLeftInput"
            placeholder="请输入组合项目名称"
          />
          <div style="overflow: scroll">
            <div v-if="!listLeft.length" style="margin-top: 10px; text-align: center">暂无数据</div>
            <div class="module-item" v-for="(item, index) in listLeft" :key="index" @click="handleTransferLeft(index)">
              <input style="width: 14px; height: 14px; color: #606266" type="checkbox" :checked="item.checked" />
              <span
                :style="{
                  color: item.checked ? '#68b2ff' : '#000'
                }"
                >{{ item.label }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="module-operate">
        <div class="module-arrow" :class="{ hoverStyle: !currentCheckedRight.length }" @click="toLeft">←</div>
        <div class="module-arrow" :class="{ hoverStyle: !currentCheckedLeft.length }" @click="toRight">→</div>
      </div>
      <div class="module-wrapper">
        <div class="module-head">
          <span style="font-size: 16px">已选择组合项目列表</span>
          <span style="font-size: 14px">{{ currentSelectRight }}</span>
        </div>
        <div class="module-content">
          <el-input
            style="padding: 14px 10px 0"
            clearable
            v-model="listRightInput"
            @input="listRightInputChange(listRightInput)"
            placeholder="请输入已选择名称"
          />
          <div style="overflow: scroll">
            <div v-if="!listRight.length" style="margin-top: 5px; text-align: center">暂无数据</div>
            <div class="module-item" v-for="(item, index) in listRight" :key="index" @click="handleTransferRight(index)">
              <input style="width: 14px; height: 14px" type="checkbox" :checked="item.checked" />
              <span
                :style="{
                  color: item.checked ? '#68b2ff' : '#000'
                }"
                >{{ item.label }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="TransferAll">
import { computed, ref, watch } from "vue";
import { useGeneralProjectLs } from "@/stores/modules/generalProject";

// 左侧

//左侧的数据数组
const listLeft = ref<any>([]);
const listLeftCopy = ref<any>([]);

const listLeftInput = ref();

const newZuHeOption = computed(() => {
  return useGeneralProjectLs().zuHeOption;
});
watch(newZuHeOption, () => {
  listLeft.value = [...newZuHeOption.value];
  listLeftCopy.value = [...newZuHeOption.value];
});
// 点击checkbox进行状态取反
function handleTransferLeft(currentIndex) {
  listLeft.value[currentIndex].checked = !listLeft.value[currentIndex].checked;
}

// 左侧checked的数据
const currentCheckedLeft = computed(() => {
  return listLeft.value.filter(item => item.checked);
});

// 左侧选中的比例数目
const currentSelectLeft = computed(() => {
  return currentCheckedLeft.value.length + "/" + listLeft.value.length;
});

// 点击左箭头
function toLeft() {
  // 先找到右侧选中的数据
  const checkedLeftData = currentCheckedRight.value;
  // console.log(checkedLeftData, "checkedLeftData选择的值");
  // 对数据进行深拷贝 因为这里修改了checked
  const deepCloneData = JSON.parse(JSON.stringify(checkedLeftData));
  deepCloneData.forEach(item => {
    item.checked = false;
  });

  // 这里筛选出来 右边没有选中的数据 等会直接赋值
  const noCheckedLeftData = listRight.value.filter(item => !item.checked);

  // 把选中的数据添加到左边
  // 判断一下是否一样
  let noArr = [] as any;
  deepCloneData.map((item: any) => {
    if (item.ShenQingDanID === useGeneralProjectLs().treeId) {
      noArr.push(item);
    }
  });
  listLeft.value.push(...noArr);
  // 对左边数据进行排序
  listLeft.value.sort((a, b) => a.key - b.key);
  listLeft.value = removeDuplicates(listLeft.value);
  // 将右边没有选中的数据赋值给右边
  listRight.value = noCheckedLeftData;
}
const removeDuplicates = originalArray => {
  const uniqueArray = [] as any;
  const keyObj = {};

  originalArray.forEach((item: any) => {
    if (!keyObj[item.key]) {
      keyObj[item.key] = true;
      uniqueArray.push(item);
    }
  });

  return uniqueArray;
};

const listLeftInputChange = (data: any) => {
  listLeft.value = listLeftCopy.value;
  let regex = new RegExp(data, "i");
  const newLs = JSON.parse(JSON.stringify(listLeft.value));
  let foundItems = newLs.filter(item => regex.test(item.label));

  if (foundItems.length > 0) {
    listLeft.value = foundItems;
  } else {
    listLeft.value = [];
  }
};

const listRightInputChange = (data: any) => {
  if (listRightCopy.value) {
    listRight.value = listRightCopy.value;
    let regex = new RegExp(data, "i");
    const newLs = JSON.parse(JSON.stringify(listRight.value));
    let foundItems = newLs.filter((item: any) => regex.test(item.label));

    if (foundItems.length > 0) {
      listRight.value = foundItems;
    } else {
      listRight.value = [];
    }
  }
};

// 右侧
// 右侧的数据数组
const listRight = ref<any>([]);
const listRightInput = ref<any>();
const listRightCopy = ref<any>();

// 右侧选中的数据
const currentCheckedRight = computed(() => {
  return listRight.value.filter(item => item.checked);
});

// 右侧选中的比例数目
const currentSelectRight = computed(() => {
  return currentCheckedRight.value.length + "/" + listRight.value.length;
});

// 点击checkbox进行状态取反
function handleTransferRight(currentIndex) {
  listRight.value[currentIndex].checked = !listRight.value[currentIndex].checked;
}

// 点击右箭头
function toRight() {
  // 对选中数据进行深拷贝
  const deepCloneData = JSON.parse(JSON.stringify(currentCheckedLeft.value));
  // 把刚选择的数据状态进行清除
  deepCloneData.forEach(item => {
    item.checked = false;
  });
  // 把选中的数据添加到右边 需要把刚选择的数据状态进行清除
  listRight.value.push(...deepCloneData);
  // 对右边数据进行重新排序
  listRight.value.sort((a, b) => a.key - b.key);

  // 根据 key 去重
  listRight.value = listRight.value.filter((item, index) => {
    return (
      index ===
      listRight.value.findIndex(prevItem => {
        return prevItem.key === item.key;
      })
    );
  });
  listRightCopy.value = listRight.value;
  // 找到未选中数据 进行重新赋值
  listLeft.value = listLeft.value.filter(item => !item.checked);
}

// 清除数据
const clearAllArr = () => {
  listRight.value = [];
  listLeft.value = [];
  listRightCopy.value = [];
  listLeftCopy.value = [];
  listLeftInput.value = "";
  listRightInput.value = "";
};

defineExpose({
  listRight,
  clearAllArr
});
</script>

<style lang="scss" scoped>
@media (width <= 600px) {
  .module-wrapper {
    width: 130px !important;
  }
}
.module-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.module-wrapper {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 200px;
  height: 100%;
  border-radius: 4px;
  .module-head {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    background-color: #f5f7fa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  .module-content {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid #ebeef5;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    .module-item {
      display: flex;
      align-items: center;
      margin-top: 10px;
      margin-left: 10px;
      span {
        display: inline-block;
        font-size: 14px;
      }
      &:hover span {
        color: #68b2ff !important;
        cursor: pointer;
      }
    }
  }
}
.module-operate {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 200px;
  margin: 0 10px;
  .module-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 30px;
    color: #ffffff;
    background: #409eff;
    border-radius: 7px;
    &:hover {
      cursor: pointer;
    }
  }
}
.hoverStyle {
  background-color: #a0cfff;
  opacity: 0.5;
  &:hover {
    cursor: not-allowed !important;
  }
}
</style>
